<template>
  <div>
    <head-top goBack="true" style="background: none"></head-top>
    <div class="top flexCenter">
      <div class="flexCenter">
        <img src="../../images/logo.svg" alt="">

      </div>
    </div>
    <div class="container">
      <div class="cell flexLeft">
        <span class="iconfont icon-shouji"></span>
        <input maxlength="11" type="tel" v-model="info.UserPhone" placeholder="请输入手机号">
        <button
          @click="getSms"
          :disabled="info.UserPhone.length!=11||!isClick"
          :class="{'btn-error':info.UserPhone.length==11&&isClick,'btn-default':info.UserPhone.length!=11||!isClick}"
          class="btn"
        >{{btnName}}
        </button>
      </div>
      <div class="cell flexLeft">
        <span class="iconfont icon-yanzhengma"></span>
        <input type="text" v-model="info.SMS" placeholder="请输入验证码">
      </div>
      <div class="cell flexLeft">
        <span class="iconfont icon-mima"></span>
        <input type="password" v-model="info.UserPwd" placeholder="请输入密码">
      </div>
      <div class="flexAround">
        <label class="registerType" for="guider">
          <input value="1"  v-model="info.UserType" name="type" id="guider" type="radio">
          导购员
        </label>
        <label class="registerType" for="customer">
          <input value="2" v-model="info.UserType" name="type" id="customer" type="radio">
          消费者
        </label>
      </div>


      <div style="height: 1.54rem;" @click="Search" class="cell flexLeft" v-if="info.UserType==1">
        <span style="font-size: 0.60rem" class="iconfont">所属经销商：</span>
        <input style="font-size: 0.51rem;color: #b8b8b8" readonly v-model="info.distributorName" type="text" placeholder="请选择经销商">
      </div>
      <div style="height: 1.54rem;" class="cell flexLeft" v-if="info.UserType==1">
        <span style="font-size: 0.60rem" class="iconfont">所属的门店：</span>
        <select v-model="info.StoreId">
          <option v-for="item in storeArr" :value="item.Value">{{item.Text}}</option>
        </select>
      </div>


      <button
        :disabled="!isRegister"
        @click="registerInfo"
        :class="{'btn-big-error':isRegister,'btn-big-default':!isRegister}"
        class="btn-big"
      >确认注册
      </button>
    </div>



    <div v-if="showSearch" class="search-con">
      <div class='search-top flexLeft'>
        <span class="iconfont icon-sousuo"></span>
        <input @keyup="showKeywords" v-model="keywords" type="text" placeholder="搜索经销商">
        <span @click="Search" class="cancel">取消</span>
      </div>
      <div class="search-content">
        <ul>
          <li @click="getKeywords(item)" v-for="item in keywordsArr" class="flexBetween">
            <span>{{item.Text}}</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
  import {Toast, Popup, Picker} from "mint-ui";
  import headTop from "src/components/header/newHead";

  export default {
    name: "register",
    data() {
      return {
        info: {
          UserPhone: "",
          UserPwd: "",
          SMS: "",
          UserType: 2,
          EnterpriseId: 0,
          distributorName:'',
          storeName: "",
          StoreId:''
        },
        time: 20,
        btnName: "获取验证码",
        Interval: "",
        isClick: true,
        popupVisible: false,
        showToolbar: true,
        showSearch: false,
        distributorArr: [],
        storeArr: [],
        keywords: '',
        keywordsArr: [],
        selectArr:[]

      };
    },
    components: {
      headTop,
    },
    computed: {
      isRegister() {
        if (
          this.info.UserPhone.length == 11 &&
          this.info.UserPwd.length >= 6
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
    methods: {

      Search() {
        this.keywordsArr=[];
        this.keywords='';
        this.showSearch = !this.showSearch;
      },
      getKeywords(item){
        this.Search();
        this.info.distributorName=item.Text;
        this.info.DistributorId=item.Value;
      },
      getSms() {
        this.$axios
          .post("smseid", {phone: this.info.UserPhone, eid: this.info.EnterpriseId })
          .then(p => {
            this.info.Gid = p.data.result.Gid;
            if (p.data.status == "10001") {
              Toast({
                message: p.data.result.msg,
                iconClass: "iconfont icon-dui",
                duration: 1500
              });
              this.Interval = setInterval(() => {
                this.time--;
                if (this.time > 0) {
                  this.isClick = false;
                  this.btnName = this.time + "s后重新获取";
                } else {
                  this.time = 20;
                  this.btnName = "重新发送";
                  this.isClick = true;
                  clearInterval(this.Interval);
                }
              }, 1000);
            }
          });
      },
      registerInfo() {
         if (this.info.Gid) {

          if(!this.info.DistributorId){
            this.info.DistributorId=0;
          }
          if(!this.info.StoreId){
            this.info.StoreId=0;
          }
        this.$axios.post("Integral.user.register", this.info).then(p => {
          if (p.data.msg == "注册成功") {
          Toast({
            message: p.data.msg,
            iconClass: "iconfont icon-dui",
            duration: 1500
          });
            setTimeout(() => {
              this.$router.replace({
                path: "/login",
                query: {
                  phone: this.info.UserPhone,
                  pwd: this.info.UserPwd,
                  eid:this.info.EnterpriseId,
                  userType:this.info.UserType
                }
              });
            }, 1500);
          }else{
             Toast({
            message: p.data.msg,
            iconClass: "iconfont icon-cuo",
            duration: 1500
          });
          } });
          }
        else{
           Toast({
          message: "请先获取验证码",
          iconClass: "iconfont icon-cuo",
          duration: 1500
        });  
        }
      },

      getstoreselect() {//获取企业下面的门店下拉
        this.$axios
          .get("integral.store.getselect", {
            params: {
              eid: this.info.EnterpriseId
            }
          })
          .then(p => {
            this.storeArr = p.data.result;
            if(p.data.result.length>0){
              this.info.StoreId=p.data.result[0].Value;
            }
          });
      },
      getdistributorselect() {//根据名称或手机号模糊搜索企业下面的经销商
        this.$axios
          .get("integral.distributor.getselect", {
            params: {
              eid: this.info.EnterpriseId,
              name: ""
            }
          })
          .then(p => {
            this.distributorArr = p.data.result;
          });
      },

      showKeywords() {
        this.keywordsArr = [];
        if (this.keywords != '') {
          for (var item in this.distributorArr) {
            if (this.distributorArr[item].Text.indexOf(this.keywords) > -1) {
              this.keywordsArr.push(this.distributorArr[item]);
            }
          }
        }

      }
    },
    created() {
      this.info = Object.assign(this.$route.query, this.info);
      if (this.$route.query.eid) {
        this.info.EnterpriseId = this.$route.query.eid;
      }

      if (this.$route.query.iuid) {
        this.info.InviteUserId = this.$route.query.iuid;
      }else{
        this.info.InviteUserId =0;
      }

      this.getstoreselect();
      this.getdistributorselect();
    },
    mounted() {
    }
  };
</script>

<style lang="scss" scoped>
  .top {
    padding: 2.13rem 0;

    > div {
      width: 2.99rem;
      height: 2.99rem;
      overflow: hidden;
    }

    img {
      width: 100%;
      /*border-radius: 50%;*/
    }
  }

  .container {
    width: 90%;
    margin: 0 auto;

    .cell {
      border-bottom: 1px solid #e7eaed;
      padding-bottom: 5px;
      margin-bottom: 10px;
      select {
        height: 1.28rem;
        background: #d4d4d4;
        border-radius: 0.17rem;
      }

      .iconfont {
        font-size: 1rem;
        margin-right: 0.43rem;
        margin-left: 0.43rem;
        color: #b8b8b8;
      }

      input {
        flex: 1;
        background: none;
        height: 1.49rem;
        border: none;
        outline: none;
        font-size: 0.68rem;
      }
    }

    .tips {
      span {
        color: #b8b8b8;
        font-size: 0.51rem;
        margin-top: 0.43rem;
        padding: 0.43rem;
      }
    }

    .registerType {
      font-size: 0.68rem;
      margin: 0.43rem 0 0.64rem;
      color: #b8b8b8;

      input {
        margin-left: 0.43rem;
      }
    }

     .picker-toolbar-title {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }

        .usi-btn-cancel,
        .usi-btn-sure {
      color: #ff6600;
    }
  }

  .search-con {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
    top: 0;
    left: 0;

    .search-top {
      width: 96%;
      margin: 0 auto;
      padding: 2px 0.5rem;
      border: 1px solid #e7eaed;
      border-radius: 1rem;
      margin-top: 0.43rem;
      background: #e7eaed;

      .iconfont {
        font-size: 1.07rem;
        color: white;
      }

      input {
        flex: 1;
        height: 1.15rem;
        text-indent: 0.5rem;
        background: #e7eaed;
        color: #FB5D57;
      }

      .cancel {
        font-size: 0.60rem;
        padding: 3px 0.21rem;
        color: rgba(127, 127, 127, 0.8);
      }
    }

    .search-content {
      height: calc(100% - 1.83rem);
      overflow: hidden;

      ul {
        width: 96%;
        margin: 0 auto;
        list-style: none;
        margin-top: 0.43rem;
        overflow-y: auto;
        height: 100%;
        padding-bottom: 0.43rem;
        -webkit-overflow-scrolling: touch;

        li {
          height: 1.4rem;
          border-bottom: 1px solid #e7eaed;

          span:nth-child(1) {
            font-size: 0.51rem;
            color: rgba(127, 127, 127, 0.8);
            margin-left: 0.43rem;
          }

          .iconfont {
            color: rgba(127, 127, 127, 0.8);
          }
        }
      }

    }
  }
</style>
